<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.11.3.min.js"></script>
    <script>
        $('document').ready(function () {


            //设置登录按钮不可点击。
            $('.login-button').attr('disabled', true);
            $('.login-button').css('background', '#9db0ff');
            //设置登录按钮的悬浮游标为禁用状态
            $('.login-button').css('cursor', 'not-allowed');

            $('#username, #password').bind('input', function () {
                var username = $.trim($('#username').val());
                var password = $.trim($('#password').val());

                if (username !== '' && password !== '') {
                    $('.login-button').attr('disabled', false);
                    $('.login-button').css('background', '#2f54eb');
                    $('.login-button').css('cursor', 'pointer');
                } else {
                    //设置登录按钮不可点击。
                    $('.login-button').attr('disabled', 'true');
                    $('.login-button').css('background', '#9db0ff');
                    //设置登录按钮的悬浮游标为禁用状态
                    $('.login-button').css('cursor', 'not-allowed');
                }
            });

        });
    </script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        /* 取消a标签的下划线 */
        a {
            text-decoration: none;
            color: black;

        }

        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .container {
            display: flex;
            border-radius: 8px;
            /* border: 2px solid #2f54eb; */
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
        }

        .bg1 {
            /* border: 2px solid #26272b; */
            width: 450px;
            height: 450px;

        }

        .login-form {
            /* border: 2px solid red; */
            width: 400px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 0px;
        }

        #text1 {
            color: #2f54eb;
            /* font-size: 20px; */
            margin: 0 0 35px 0;
        }

        .login-input {
            width: 280px;
            height: 32px;
            font-size: 14px;
            margin: 0 0 20px 0;
            padding: 0 0 0 20px;
            border: 1px solid #2f54eb;
            border-radius: 3px;
            background-color: #f1f3f8;
        }

        .option-radio {
            position: relative;
            display: flex;
            width: 300px;
            font-size: 14px;
            margin: 0 0 20px 0;
            /* 用户无法选中文本 */
            user-select: none;
        }

        .option-radio-item {
            width: 100px;
            height: 15px;
            /* background-color: red; */
            margin: 0 0 0 0;
        }

        #option-radio-teacher {
            position: absolute;
            left: 120px;
        }

        #option-radio-admin {
            position: absolute;
            right: -40px;
        }

        .role-radio {
            width: 15px;
            height: 15px;
        }

        .radio-text {
            position: absolute;
            line-height: 15px;
            margin: 0 0 0 3px;

        }

        .radio-text:hover {
            font-weight: 700;
            color: #2f54eb;
        }

        .option {
            position: relative;
            display: flex;
            width: 300px;
            font-size: 14px;
            margin: 0 0 20px 0;
            /* 用户无法选中文本 */
            user-select: none;
            /* background-color: red; */
        }

        .remember-checkbox {
            width: 15px;
            height: 15px;
        }

        .option-item {
            line-height: 15px;
        }

        .option-item:hover {
            font-weight: 700;
            color: #2f54eb;
        }

        .remember-text {
            margin: 0 0 0 3px;
        }

        .forget {
            position: absolute;
            right: 0px;
        }

        .register {
            position: absolute;
            left: 120px;
        }

        .login-button {
            width: 300px;
            height: 38px;
            font-size: 14px;
            margin: 0 0 20px 0;
            background-color: #2f54eb;
            /* border: 1px solid #2f54eb; */
            color: #fff;
            border-radius: 3px;
        }
    </style>

</head>

<body>

    <div class="container">

        <img class="bg1" src="../images/icon1.svg" alt="背景图片">

        <form action="#" method="post" class="login-form">

            <h2 id="text1">郑经在线考试系统</h2>

            <input class="login-input" type="text" name="" id="username" placeholder="请输入账号">
            <input class="login-input" type="password" name="" id="password" placeholder="请输入密码">

            <div class="option-radio">

                <div class="option-radio-item">
                    <input class="role-radio" id="student" name="radio" type="radio" value="student" checked="checked">
                    <label class="radio-text" for="student">学生</label>
                </div>

                <div class="option-radio-item" id="option-radio-teacher">
                    <input class="role-radio" id="teacher" name="radio" type="radio" value="teacher">
                    <label class="radio-text" for="teacher">教师</label>
                </div>

                <div class="option-radio-item" id="option-radio-admin">
                    <input class="role-radio" id="admin" name="radio" type="radio" value="admin">
                    <label class="radio-text" for="admin">管理员</label>
                </div>

            </div>

            <div class="option">
                <input class="remember-checkbox" id="remember-checkbox" type="checkbox" value="remember">
                <label class="remember-text option-item" for="remember-checkbox">记住我</label>
                <a class="forget option-item" href="#">忘记密码?</a>
                <a class="register option-item" href="#">立即注册</a>
            </div>

            <div>
                <input class="login-button" type="submit" value="登录">
            </div>

        </form>
    </div>
</body>

</html>